<template>
    <el-row>

        <el-col :span="24" class="col">
            <el-button type="primary" @click="xinzeng">新增回复</el-button>
        </el-col>

        <el-col :span="24" class="col">
            <el-table border :data="areaList" style="width: 100%">
                <el-table-column prop="id" label="ID" align="center" label-class-name="header"></el-table-column>
                <el-table-column prop="replyContent" label="回复内容" align="center"
                    label-class-name="header"></el-table-column>
                <el-table-column prop="systemUserId" label="用户id" align="center" label-class-name="header"></el-table-column>
                <el-table-column prop="questionId" label="问题id" align="center" label-class-name="header"></el-table-column>
                <el-table-column prop="replyUserId" label="回复用户的用户id" align="center" label-class-name="header"></el-table-column>
                <el-table-column prop="time" label="回复时间" align="center"
                    label-class-name="header"></el-table-column>
                <el-table-column label="操作" align="center" label-class-name="header">
                    <template #default="item">
                        <el-button type="text" @click="xiangxi(item.row)">查看详细信息</el-button>
                        <el-button type="text" @click="del(item.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-col>
        <el-dialog v-model="show" :title="title" width="800" destroy-on-close="true">
            <XinZeng v-if="title == '新增回复'"></XinZeng>
            <CaKan v-if="title == '详细信息'" :form="form"></CaKan>
        </el-dialog>
        <el-dialog v-model="shan" :title="title" width="300" destroy-on-close="true">
            <ShanChu v-if="title == '删除'"  @operate="guanbi" :id="id"></ShanChu>
        </el-dialog>
    </el-row>
</template>
<script setup>
import { onMounted, ref } from 'vue';
import axios from 'axios';
import ShanChu from './components/reply/ShanChu.vue';
import XinZeng from './components/reply/XinZeng.vue';
import CaKan from './components/reply/CaKan.vue';
let res = null;
let areaList = ref([]);
let title = ref("");
let show = ref(false);
let shan = ref(false);
let id = ref({});
let form = ref({});


const xinzeng = function(){
    show.value = true;
    title.value = '新增回复';
}
const del = function(item){
    shan.value = true;
    title.value = '删除',
    id.value = { id: item.id };
}
const xiangxi = function(data){
    show.value = true;
    title.value = '详细信息';
    form.value = data;
}
//首次加载
onMounted(async function () {
    res = await axios.get("/api/reply/findAll")
    console.log(res);
    areaList.value = res.data.data;

})
const guanbi = function(){
    shan.value = false;
}
</script>
<style lang="less" scoped>
.col {
    margin: 10px 0;
}

/deep/.header {
    background-color: #1890ff !important;
    color: white;
}
</style>